<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">用户授权</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<view class="text-center margin-top-sm">
			<image class="logo" src="/static/logo.png" mode=""></image>
			<view class="slogan">
				<text>授权后将获得以下权限</text>
				<text>▪ 收藏文章、评论等功能</text>
			</view>
			<button class="auth-btn" @tap="getUser">授权用户信息</button>
		</view>
	</view>
</template>

<script>
	import * as member from '@/api/blog/member/member.js'
	export default {
		data() {
			return {
				isLoad: false
			}
		},
		methods: {
			getUser() {
				if (this.isLoad) {
					return false
				}
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '获取你的昵称、头像等',
					success: (resUser) => {
						this.isLoad = true
						const userInfo = resUser.userInfo
						member.modify({
							nickName: userInfo.nickName,
							avatar: userInfo.avatarUrl,
							gender: userInfo.gender,
							province: userInfo.province,
							city: userInfo.city
						}).then(res => {
							if (res.code === 1) {
								// 用户信息
								this.$cache.put(this.$cache.key.userInfo, res.data)
								uni.navigateBack({
									delta:1
								})
							} else {
								console.log('授权失败：', res)
								this.$tools.showToast({
									msg: '授权失败'
								})
							}
						})
					},
					fail: (e) => {
						console.log('授权失败：', e)
						this.$tools.showToast({
							msg: '授权失败'
						})
					},
					complete: () => {
						this.isLoad = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.logo{
		width: 215rpx;
		height: 215rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
	}
	.auth-btn{
		width: 650rpx;
		margin: 200rpx auto  0 auto;
		line-height: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		color: #fff;
		background: linear-gradient(90deg,#287FFA,#28C8FA);
		box-shadow: 0px 4rpx 20rpx rgba(40, 127, 250, .5);
	}
	.slogan{
		width: 690rpx;
		margin: 0 auto;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: center;
		text{
			display: block;
		}
	}
</style>
